<template>
	<div id="homepage_container" class="sub-page-wrapper">
		<!-- banner条 -->
		<div id="homepage_banner" class="swiper-container">
			<div class="swiper-wrapper">
               <a class='swiper-slide' v-for="b in banners">
               		<img :src="b.path">
               </a>
          	</div>
          	<div class="swiper-pagination"></div>
		</div>
		<!-- nav条 -->
		<div id="homepage_nav">
			<span v-for="(n,index) in nav.items" class="nav"
			:class="{active:index === nav.activeNav}"
			@click="clickNav(index)">
				{{n.name}}
			</span>
			<div id="nav_underline" :style="{left: underlineLeft}"></div>
		</div>
		<div id="homepage_main">
			<HomepageBoard v-show="nav.activeNav < 3" :currentNav="nav.activeNav"></HomepageBoard>
			<HomepageRank v-show="nav.activeNav === 3"></HomepageRank>
		</div>
	</div>
</template>
<script>
	import Swiper from '../../assets/lib/swiper.js';
	import HomepageBoard from './HomepageBoard.vue'
	import HomepageRank from './HomepageRank.vue'
	import {getParameterByName, loadMore, myAlert} from '../../assets/js/utils.js'
	export default{
		name:'homepage',
		data(){
			return{
				banners:[{
					path: ''
				}],
				nav:{
					// 0:热度 1:赏金 2:积分 3:个人
					activeNav: '',
					items:[{
						name:'热度榜',
						left:''
					},{
						name:'赏金榜',
						left:''
					},{
						name:'积分榜',
						left:''
					},{
						name:'个人榜',
						left:''
					}]
				}
			}
		},
		mounted(){
			let navs = document.querySelectorAll('.nav');
			this.nav.items.forEach((nav,i)=>{
				nav.left = navs[i].getBoundingClientRect().left + 'px';
			})
			let isQuery =  Object.keys(this.$route.query).length;
			this.nav.activeNav = isQuery ? Number(this.$route.query.type) : 0;
			this.clickNav(this.nav.activeNav);
			// 拉取轮播图数据
			this.$http.post('',{
				name:'xwlt.pc.banner'
			}).then((response)=>{
				this.banners = response.body.data.banner_homepage;
				this.$nextTick(()=>{
					  new Swiper('#homepage_banner',{
				          pagination: '#homepage_banner .swiper-pagination',
				          slidesPerView: 1,
				          paginationClickable:false,
				          autoplay: 5000,
				          loop:true
				      })
				})
			})
		},
		methods:{
			clickNav(index){
				this.$router.push({ query:{ type:index } });
				this.nav.activeNav = index;
			}
		},
		computed:{
			underlineLeft(){
				if(this.nav.activeNav === '') return false;
				return this.nav.items[this.nav.activeNav].left;
			}
		},
		watch:{
			transitionDone(done){
				console.log('done了吗？')
				if(done) {
					// 寸各榜的left值
					let navs = document.querySelectorAll('.nav');
					this.nav.items.forEach((nav,i)=>{
						nav.left = navs[i].getBoundingClientRect().left + 'px';
					})
					this.clickNav(this.nav.activeNav);
				}
			}
		},
		props:['transitionDone'],
		components:{ HomepageBoard, HomepageRank }
	}
</script>
<style scoped lang='less'>
	@import '../../assets/lib/swiper.min.css';
	@baseColor: #ffe857;
	@subColor: #f9c13a;
	#homepage_container{
	}
	#homepage_banner{
		width: 100%;
		height: 3.73rem;
		.swiper-slide img{
			width: 10rem;
			height: 3.73rem;
		}
	}
	#homepage_main{
		margin-top: .16rem;
		position: relative;
	}
	#homepage_nav{
		border-top:1px solid #bbb;
		display:flex;
		justify-content:space-around;
		background:#fff;
		position: relative;
		.nav{
			font-size:0.37rem;
			color:#4c4c4c;
			letter-spacing:-0.07px;
			text-align:center;
			width: 1.97rem;
			height:0.96rem;
			line-height:.96rem;
			border-bottom: 0.05rem solid transparent;
			&.active{
				color: @subColor;
				/*border-color: @subColor;*/
			}
		}
		#nav_underline{
			width: 1.97rem;
			background: @subColor;
			height: .05rem;
			position: absolute;
			bottom: 0;
			transition: left .2s;
		}
	}
</style>